@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-50: #eff6ff;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
}

@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white font-medium py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 font-medium py-3 px-4 rounded-lg hover:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply bg-red-600 text-white font-medium py-3 px-4 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@layer utilities {
  .text-primary-600 {
    color: var(--primary-600);
  }

  .text-primary-700 {
    color: var(--primary-700);
  }

  .bg-primary-50 {
    background-color: var(--primary-50);
  }

  .border-primary-500 {
    border-color: var(--primary-500);
  }

  .border-primary-600 {
    border-color: var(--primary-600);
  }

  .ring-primary-500 {
    --tw-ring-color: var(--primary-500);
  }
}

/* 响应式设计 */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    @apply py-2 px-3 text-sm;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
} 